<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/css/layui.min.2.9.21.css">
  <link rel="stylesheet" href="/css/index.css">
</head>

<body>

  <div class="layui-row main">
    <div class="layui-col-sm2 layui-col-xs0"> </div>
    <div class="layui-col-sm8 layui-col-xs12" id="conten">

    </div>
    <div class="layui-col-sm2 layui-col-xs0"> </div>

  </div>

  <script src="/js/jquery.min.js"></script>
  <script src="/js/crypto-js.js"></script>
  <script src="/js/webp-hero.bundle.js"></script>
  <!-- 需要 main_load_img.js 来加载图片。且img标签的src为空才行,真实的图片地址在data-r-src属性中 -->
  <script src="/js/main_load_img.js"></script>
  <script src="/js/layui.min.2.9.21.js"></script>
  <script src="../js/axios.js"></script>
  <script>
    layui.use(function () {
      var layer = layui.layer;
      var form = layui.form;
      var table = layui.table;
      var util = layui.util;
      var flow = layui.flow;
      var laytpl = layui.laytpl

      axios.get('/getBook?id=' + urlToJson().search_.id)
        .then(function (response) {
          // console.log(response);
          let { data } = response;
          let d = { ...data[0] };
          d.status_ = d.status_ ? '完结' : '连载中';
          d.list = data;

          // 同步写法
          var getTpl = document.getElementById('TPL').innerHTML; // 获取模板字符
          var str = laytpl(getTpl).render(d);
          document.getElementById('conten').innerHTML = str;

        })
    });
  </script>

  <script id="TPL" type="text/html">
    <div class="layui-col-sm12 layui-col-xs12" style="padding: 5px;">
      <a href="/pages/index.html" target="_blank" rel="noopener noreferrer">
        <i class="layui-icon layui-icon-prev"></i> 返回首页
      </a>
    </div>
    <div class="layui-col-sm6 layui-col-xs12" style="padding: 5px;">
      <img src="{{= d.img }}" style="width: 100%;">
    </div>
    <div class="layui-col-sm6 layui-col-xs12"
      style="font-size: 14px; line-height: 22px; margin: 10px 0; padding-left: 13px;">
      <p style="font-size: 18px;">{{= d.name_ }}</p>
      <p>作者：{{= d.author }}</p>
      <p>更新状态：{{= d.status_  }}</p>
      <p>更新时间：{{= format("YYYY-MM-DD",d.update_date)  }}</p>
      <p>最新章节：{{= d.new_chapter }}</p>
      <p>地区：{{= d.region }}</p>
      <p>类别：{{= d.type }}</p>
      
      <hr class="layui-border-green">
      <div class="layui-bg-gray" style="padding: 0px;">
        <div class="layui-row layui-col-space15">
          <div class="layui-col-md12">
            <div class="layui-card">
              <div class="layui-card-header">章节总：{{= d.list.length  }}</div>
              <div class="layui-card-body">
                {{#  layui.each(d.list, function(index, item){ }}
                  <a href="/pages/show.html?id={{= item.id }}&name={{= d.name_ }}&chapter_title={{= item.chapter_title }}" class="book_a">{{= item.chapter_title }}</a>
                {{#  }); }}
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    
  </script>
</body>

</html>